import {
    View,
    Text,
    TouchableOpacity,
    ImageBackground,
    TextInput,
} from 'react-native';
import React, {useState, useEffect} from 'react';
import {WingBlank, WhiteSpace} from '@ant-design/react-native';
import AntDesign from 'react-native-vector-icons/AntDesign';
import Feather from 'react-native-vector-icons/Feather';
import moment from 'moment';
import PropTypes from 'prop-types';
import styles from './styles';
import {editSlogan} from '../../comconfig/sqlfun';
import {debounce} from '../../utils/common';

const WorkbenchView = ({navigation, mineLogInfo, usesrInfo, reportCount}) => {
    const [text, setText] = useState('');
    const [edit, setEdit] = useState(false);
    useEffect(() => {
        setText(usesrInfo.slogan);
    }, [usesrInfo]);
    return (
        <View>
            <WingBlank>
                <View>
                    <TouchableOpacity
                        onPress={() => {
                            if (edit) {
                                editSlogan(text);
                            }
                            setEdit(!edit);
                        }}
                        style={styles.editText}>
                        <AntDesign
                            name={edit ? 'pushpino' : 'pushpin'}
                            size={30}
                            color="#0079FF"
                        />
                    </TouchableOpacity>
                    <ImageBackground
                        source={require('../../assets/images/blackboard.png')}
                        style={{width: 350, height: 200}}
                        resizeMode="stretch">
                        <TextInput
                            multiline
                            numberOfLines={3}
                            style={styles.blackboard}
                            scrollEnabled={false}
                            editable={edit}
                            onChangeText={val => {
                                setText(val);
                            }}
                            value={text}
                            // caretHidden
                        />
                    </ImageBackground>
                </View>
                <WhiteSpace />
                <View style={styles.function}>
                    <AntDesign name="user" size={90} color="#0079FF" />
                    <View style={{flex: 1}}>
                        <Text style={styles.title}>我的信息</Text>
                        <View style={{flexDirection: 'row'}}>
                            <View style={styles.userRow}>
                                <Feather
                                    name="award"
                                    size={18}
                                    color="#0079FF"
                                />
                                <Text>已使用</Text>
                                <Text style={styles.dataFont}>
                                    {JSON.stringify(usesrInfo) === '{}'
                                        ? 0
                                        : usesrInfo.day}
                                </Text>
                                <Text>天</Text>
                            </View>
                            <View style={styles.row}>
                                <Feather
                                    name="zap-off"
                                    size={18}
                                    color="#0079FF"
                                />
                                <Text>超时</Text>
                                <Text style={styles.dataFont}>
                                    {JSON.stringify(usesrInfo) === '{}'
                                        ? 0
                                        : usesrInfo.timeout}
                                </Text>
                                <Text>次</Text>
                            </View>
                        </View>
                        <WhiteSpace />
                        <View style={{flexDirection: 'row'}}>
                            <View style={styles.userRow}>
                                <Feather
                                    name="send"
                                    size={18}
                                    color="#0079FF"
                                />
                                <Text>已完成</Text>
                                <Text style={styles.dataFont}>
                                    {JSON.stringify(usesrInfo) === '{}'
                                        ? 0
                                        : usesrInfo.complete}
                                </Text>
                            </View>
                            <View style={styles.workTime}>
                                <Feather name="sun" size={18} color="#0079FF" />
                                <Text>工作时长</Text>
                                <Text style={styles.dataFont}>
                                    {JSON.stringify(usesrInfo) === '{}'
                                        ? 0
                                        : usesrInfo.worktime}
                                </Text>
                                <Text>小时</Text>
                            </View>
                        </View>
                    </View>
                </View>
                <WhiteSpace />
                <TouchableOpacity
                    onPress={() => debounce(() => navigation.push('日志'))}>
                    <View style={styles.function}>
                        <AntDesign name="profile" size={90} color="#0079FF" />
                        <View>
                            <Text style={styles.title}>日志</Text>
                            <WhiteSpace />
                            <Text>工作情况|未完成的工作|工作存在的问题</Text>
                            <WhiteSpace />
                            <View
                                style={{
                                    flexDirection: 'row',
                                    justifyContent: 'space-between',
                                }}>
                                <View style={styles.row}>
                                    <Text>共</Text>
                                    <Text style={styles.dataFont}>
                                        {JSON.stringify(mineLogInfo) === '{}'
                                            ? 0
                                            : mineLogInfo.logCount}
                                    </Text>
                                    <Text>个日志</Text>
                                </View>
                                <View style={styles.row}>
                                    <Text> 最近日志</Text>
                                    <Text style={styles.dataFont}>
                                        {JSON.stringify(mineLogInfo) === '{}'
                                            ? '~—~'
                                            : moment(
                                                  mineLogInfo.lastTime,
                                              ).format('YYYY-MM-DD')}
                                    </Text>
                                </View>
                            </View>
                        </View>
                    </View>
                </TouchableOpacity>
                <WhiteSpace />
                <TouchableOpacity
                    onPress={() => debounce(() => navigation.push('验收报告'))}>
                    <View style={styles.function}>
                        <Feather name="coffee" size={90} color="#0079FF" />
                        <View>
                            <Text style={styles.title}>验收报告</Text>
                            <WhiteSpace />
                            <Text>查看验收报告|在验收汇总添加图片/附件</Text>
                            <WhiteSpace />
                            <View
                                style={{
                                    flexDirection: 'row',
                                    justifyContent: 'space-between',
                                }}>
                                <View style={styles.row}>
                                    <Text>共</Text>
                                    <Text style={styles.dataFont}>
                                        {reportCount}
                                    </Text>
                                    <Text>份报告</Text>
                                </View>
                            </View>
                        </View>
                    </View>
                </TouchableOpacity>
                <WhiteSpace />
                <View style={styles.function}>
                    <AntDesign name="inbox" size={90} color="#0079FF" />
                    <View style={{flex: 1}}>
                        <Text style={styles.title}>回收站</Text>
                        <View style={styles.delspace}>
                            <TouchableOpacity
                                onPress={() =>
                                    debounce(() =>
                                        navigation.push('回收站', {type: 1}),
                                    )
                                }>
                                <View style={{alignItems: 'center'}}>
                                    <Feather
                                        name="book"
                                        size={50}
                                        color="#DFCA4D"
                                    />
                                    <Text>笔记</Text>
                                </View>
                            </TouchableOpacity>
                            <TouchableOpacity
                                onPress={() =>
                                    debounce(() =>
                                        navigation.push('回收站', {type: 2}),
                                    )
                                }>
                                <View style={{alignItems: 'center'}}>
                                    <Feather
                                        name="coffee"
                                        size={50}
                                        color="#D18539"
                                    />
                                    <Text>验收</Text>
                                </View>
                            </TouchableOpacity>
                            <TouchableOpacity
                                onPress={() =>
                                    debounce(() =>
                                        navigation.push('回收站', {type: 3}),
                                    )
                                }>
                                <View style={{alignItems: 'center'}}>
                                    <AntDesign
                                        name="profile"
                                        size={50}
                                        color="#0079FF"
                                    />
                                    <Text>日志</Text>
                                </View>
                            </TouchableOpacity>
                        </View>
                    </View>
                </View>
                {/* <WhiteSpace /> */}
            </WingBlank>
        </View>
    );
};
WorkbenchView.defaultProps = {
    mineLogInfo: {},
    usesrInfo: {},
    reportCount: 0,
};
WorkbenchView.propTypes = {
    mineLogInfo: PropTypes.objectOf(PropTypes.any),
    usesrInfo: PropTypes.objectOf(PropTypes.any),
    reportCount: PropTypes.number,
};
export default WorkbenchView;
